<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,th,td{
            border: 1px solid #333;
        }
        table{
            width: 400px;
            line-height: 42px;
            text-align: center;
            border-spacing: 0;
            border-collapse: collapse;
        }

    </style>
</head>
<body>
    <!-- <table>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>198</td>
        </tr>
    </table> -->
</body>
<script>
    // 有一个二维数组    
    // var list = [
    //     ["张三", 55, 66, 77], 
    //     ["李四", 67, 89, 90], 
    //     ["王五", 96, 50, 87],
    // ]
    // 根据二维数组  动态生成表格    => 通过中间变量 二维转一维

    var list = [
        ["张三", 55, 66, 77], 
        ["李四", 67, 89, 90], 
        ["王五", 96, 50, 87],
        ["小六", 90, 72, 87],
    ]
    document.write("<table>");

    // 问题: 传统JS中 字符串(""  '')不允许换行
    // 解决方法
    // 1. 不允许换行 就不换行 => 写成一行  low
    // 2. 多字符串拼接
    // 3. ES6 新增模板字符串(`` 反引号)  允许字符串换行

    // document.write("<tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th><th>总分</th></tr>");
    // document.write("<tr>"+
    //         "<th>姓名</th>"+
    //         "<th>语文</th>"+
    //         "<th>数学</th>"+
    //         "<th>英语</th>"+
    //         "<th>总分</th>"+
    //     "</tr>");
    document.write(`<tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>总分</th>
        </tr>`); 

    for(var i=0;i<list.length;i++){
        document.write("<tr>");

        var item = list[i]; //  ["张三", 55, 66, 77]
        var sum = 0;
        for(var j = 0; j < item.length; j++){
            var each = item[j];
            document.write("<td>" + each + "</td>");
            if(j == 0) continue;    
            sum += each;
        }
        // console.log(sum);
        document.write("<td>" + sum + "</td>");
        document.write("</tr>");
    }


    


    document.write("</table>");

  
</script>
</html>